<template>
  <view class="my-settle-container">
    <view class="radio" @click="toggleSelect">
      <radio color="#c00000" :checked="isAllCheck" />全选
    </view>
    <view>
      金额：<text class="amount">￥{{ getSelectedAmount }}</text>
    </view>
    <view class="btn-settle" @click="settle"
      >结算（{{ getSelectedTotal }}）</view
    >
  </view>
</template>

<script>
import { mapGetters, mapMutations } from 'vuex'
export default {
  data () {
    return {
      time: 3, // 定时器秒数
      timer: null // 定时器
    }
  },
  computed: {
    ...mapGetters('cart', [
      'getTotal',
      'getSelectedTotal',
      'getSelectedAmount',
      'getgoodsList'
    ]),
    ...mapGetters('user', ['addressStr', 'getToken', 'getaddress']),
    isAllCheck () {
      return this.getTotal === this.getSelectedTotal
    }
  },
  methods: {
    ...mapMutations('cart', ['updateAllGoodsState']),
    ...mapMutations('user', ['setRedirectInfo']),
    // 全选/反选
    toggleSelect () {
      this.updateAllGoodsState(!this.isAllCheck)
    },
    // 结算
    settle () {
      // 要选择商品
      if (this.getSelectedTotal === 0) {
        uni.showToast({
          title: '请选择商品进行结算',
          icon: 'none',
          duration: 800
        })
        return
      }
      // 要选择收货地址
      if (!this.addressStr) {
        uni.showToast({
          title: '请选择收货地址',
          icon: 'error',
          duration: 800
        })
        return
      }
      // 判断是否登录
      if (!this.getToken) {
        uni.showToast({
          title: '请登录后再结算！' + this.time + ' 秒后自动跳转到登录页',
          icon: 'none', // 如果文字太长，必须把icon设置为null
          duration: 3000
        })

        // 定时器
        this.timer = setInterval(() => {
          if (this.time <= 1) {
            clearInterval(this.timer)
            this.time = 3

            // 进行跳转到我的页面
            uni.switchTab({
              url: '/pages/my/index',
              success: () => {
                // 记录跳转来源页面
                this.setRedirectInfo('/pages/cart/index')
              }
            })

            return
          }

          this.time--
          uni.showToast({
            title: '请登录后再结算！' + this.time + ' 秒后自动跳转到登录页',
            icon: 'none', // 如果文字太长，必须把icon设置为null
            duration: 1000
          })
        }, 1000)

        return
      }
      // 实现微信支付功能
      this.payOrder()
    },
    // 微信支付
    async payOrder () {
      // 1.1、准备好下单所需的参数
      const params = {
        order_price: this.getSelectedAmount, // 金额
        consignee_addr: `${this.addressStr} ${this.getaddress.userName}  ${this.getaddress.telNumber}`, // 收货地址
        goods: this.getgoodsList
          .filter(item => item.goods_state)
          .map(item => {
            return {
              goods_id: item.goods_id,
              goods_number: item.goods_number,
              goods_price: item.goods_price
            }
          })
      }
      // console.log(params)
      // 1.2 发请求创建订单
      const {
        meta: { status },
        message
      } = await uni.$request({
        url: 'my/orders/create',
        method: 'POST',
        data: params
      })

      if (status !== 200) return
      // 取出order_number
      const { order_number } = message

      // 2、支付
      // 2.1、获取 uni.requestPayment所需的五个参数
      const {
        meta: { status: status2 },
        message: message2
      } = await uni.$request({
        url: 'my/orders/req_unifiedorder',
        method: 'POST',
        data: {
          order_number
        }
      })

      if (status2 !== 200) return

      // 2.2 调用 uni.requestPayment 弹出支付框
      // 这个写了也没有效果，因为你们不是企业账号
      uni.requestPayment({
        ...message2.pay,
        success: async res => {
          console.log(res)
          // 告诉后台，我小程序端已经支付成功，你把后台订单的状态改为已支付
          const {
            meta: { status: status3 },
            message: message3
          } = await uni.$request({
            url: 'my/orders/chkOrder',
            method: 'POST',
            data: {
              order_number
            }
          })

          if (status3 !== 200) return
          uni.showToast({
            title: message3,
            duration: 800
          })
        },
        fail: ({ errMsg }) => {
          // 取消
          let message = ''
          if (errMsg === 'requestPayment:fail cancel') {
            message = '您取消了支付'
          } else {
            // 其它错误
            message = '支付失败请重试'
          }

          uni.showToast({
            title: message,
            icon: 'error',
            duration: 800
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.my-settle-container {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50px;
  // 将背景色从 cyan 改为 white
  background-color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-left: 5px;
  font-size: 14px;

  .radio {
    display: flex;
    align-items: center;
  }

  .amount {
    color: #c00000;
  }

  .btn-settle {
    height: 50px;
    min-width: 100px;
    background-color: #c00000;
    color: white;
    line-height: 50px;
    text-align: center;
    padding: 0 10px;
  }
}
</style>
